<script setup>
// 子穿父
// 1. 定义暗号
//  - 父组件和子组件都要定义
// 2. 父子组件分别定义暗号的行为
import { ref } from 'vue';
import Son from './components/Son.vue';

// 有100 让儿子花
const money = ref(100)
// 定义暗号
const subMoney = value => {
  money.value -= value

  if (money.value < 90) {
    return alert('小兔崽子, 别花钱了')
  }
}

</script>
<template>
  <div style="border:10px solid #333">
    <h1>我是父组件</h1>
    <span>剩余钱: {{ money }}</span>
    <br>
    <Son :money="money" @costMoney="subMoney" />
  </div>
</template>

